<template>
	<view class="personal">
		<u-transition :show="show1">
			<view class="topinfo bgbottom">
				<!-- #ifdef APP-PLUS -->
				<image src="/static/images/mybg.png" mode="widthFix"></image>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image src="/static/images/mybg1.png" mode="widthFix"></image>
				<!-- #endif -->
				<view class="info-con">
					<!-- #ifdef APP-PLUS -->
					<view class="infoxx" @click="toPage('/pages/index/msglist')">
						<image src="/static/images/xiaoxi.png"></image>
					</view>
					<!-- #endif -->
					<view class="myself-info clearfix">
						<image :src="userinfo.avatarUrl"></image>
						<view class="self-right">
							<view>
								{{userinfo.nickname}}
								<text>({{userinfo.identity_vip}})</text>
								<text v-if="userinfo.is_space!=0">空间主</text>
							</view>
							<view>
								<text>推荐人:{{userinfo.referee_member}}</text>
								<text @click="copyurl">邀请码:{{userinfo.code}}
									<image src="/static/images/copy1.png"></image>
								</text>
							</view>
						</view>
						<!-- #ifdef H5 -->
						<view class="infoxx" @click="toPage('/pages/index/msglist')">
							<image src="/static/images/xiaoxi.png"></image>
						</view>
						<!-- #endif -->
					</view>
					<view class="navbar1 myshuju clearfix">
						<view class="item" @click="toPage('lingpai')">
							<view v-if="JSON.stringify(userinfo) !='{}'">{{userinfo.member_token}}</view>
							<view v-else>0.00</view>
							<view>门票</view>
						</view>
						<view class="item" @click="toPage('profit?ptbname='+changename.div_price_name)">
							<view v-if="JSON.stringify(userinfo) !='{}'">{{userinfo.distribution_amount_tg}}</view>
							<view v-else>0</view>
							<view>推广收益</view>
						</view>
						<view class="item" @click="toSwitch('/pages/welfare/welfare')">
							<view v-if="JSON.stringify(userinfo) !='{}'">{{userinfo.child_order_price}}</view>
							<view v-else>0</view>
							<view>当日业绩</view>
						</view>
<!--						<view class="item" @click="toPage('record?type=3')">-->
<!--							<view v-if="JSON.stringify(userinfo) !='{}'">{{userinfo.points}}</view>-->
<!--							<view v-else>0</view>-->
<!--							<view>积分余额</view>-->
<!--						</view>-->
					</view>
					<view class="currency">
						<view>{{changename.div_price_name}}：{{userinfo.account}}</view>
						<view class="clearfix">
							<view @click="toPage('record?type=6&ptbname='+changename.div_price_name)">明细</view>
							<view v-if="userinfo.open_recharge_amount==1"
								@click="toPage('invest?ptbname='+changename.div_price_name)">充值</view>
						</view>
					</view>
				</view>
			</view>
			<view class="orderlist bgbottom">
				<view class="order-title">
					<view>买单信息</view>
					<view class="lookorder" @click="toPage('/pages/loot/billorder')">查看订单<u-icon name="arrow-right"
							color="#999" size="14"></u-icon></view>
				</view>
				<view class="navbar clearfix">
					<view class="item" @click="toPage('/pages/loot/billorder?showTab=payment')">
						<u-transition :show="show1">
							<image src="/static/images/d1.png"></image>
						</u-transition>
						<view>待付款</view>
						<view class="signnum" v-if="JSON.stringify(userinfo) !='{}' && userinfo.order.payment_order!=0">
							{{userinfo.order.payment_order<100?userinfo.order.payment_order:'...'}}</view>
					</view>
					<view class="item" @click="toPage('/pages/loot/billorder?showTab=paid')">
						<u-transition :show="show1">
							<image src="/static/images/d2.png"></image>
						</u-transition>
						<view>已付款</view>
						<view class="signnum" v-if="JSON.stringify(userinfo) !='{}' && userinfo.order.paid_order!=0">
							{{userinfo.order.paid_order<100?userinfo.order.paid_order:'...'}}</view>
					</view>
					<view class="item" @click="toPage('/pages/loot/billorder?showTab=resold')">
						<u-transition :show="show1">
							<image src="/static/images/d3.png"></image>
						</u-transition>
						<view>已完成/待转售</view>
						<view class="signnum" v-if="JSON.stringify(userinfo) !='{}' && userinfo.order.resold_order!=0">
							{{userinfo.order.resold_order<100?userinfo.order.resold_order:'...'}}</view>
					</view>
					<view class="item" @click="toPage('/pages/loot/billorder?showTab=completed')">
						<u-transition :show="show1">
							<image src="/static/images/d4.png"></image>
						</u-transition>
						<view>已完成</view>
						<view class="signnum" v-if="JSON.stringify(userinfo) !='{}' && userinfo.order.completed_order!=0">
							{{userinfo.order.completed_order<100?userinfo.order.completed_order:'...'}}</view>
					</view>
				</view>
			</view>
			<view class="orderlist bgbottom">
				<view class="order-title">
					<view>卖单信息</view>
					<view class="lookorder" @click="toPage('/pages/loot/saleorder')">查看订单<u-icon name="arrow-right"
							color="#999" size="14"></u-icon></view>
				</view>
				<view class="navbar clearfix">
					<view class="item" @click="toPage('/pages/loot/saleorder?showTab=shelf')">
						<u-transition :show="show1">
							<image src="/static/images/d5.png"></image>
						</u-transition>
						<view>已上架</view>
						<view class="signnum" v-if="JSON.stringify(userinfo) !='{}' && userinfo.order.shelf_order!=0">
							{{userinfo.order.shelf_order<100?userinfo.order.shelf_order:'...'}}</view>
					</view>
					<view class="item" @click="toPage('/pages/loot/saleorder?showTab=collection')">
						<u-transition :show="show1">
							<image src="/static/images/d6.png"></image>
						</u-transition>
						<view>待收款</view>
						<view class="signnum" v-if="JSON.stringify(userinfo) !='{}' && userinfo.order.collection_order!=0">
							{{userinfo.order.collection_order<100?userinfo.order.collection_order:'...'}}</view>
					</view>
					<view class="item" @click="toPage('/pages/loot/saleorder?showTab=confirm')">
						<u-transition :show="show1">
							<image src="/static/images/d7.png"></image>
						</u-transition>
						<view>待确认</view>
						<view class="signnum" v-if="JSON.stringify(userinfo) !='{}' && userinfo.order.confirm_order!=0">
							{{userinfo.order.confirm_order<100?userinfo.order.confirm_order:'...'}}</view>
					</view>
					<view class="item" @click="toPage('/pages/loot/saleorder?showTab=sell')">
						<u-transition :show="show1">
							<image src="/static/images/d8.png"></image>
						</u-transition>
						<view>已售出</view>
						<view class="signnum" v-if="JSON.stringify(userinfo) !='{}' && userinfo.order.sell_order!=0">
							{{userinfo.order.sell_order<100?userinfo.order.sell_order:'...'}}</view>
					</view>
				</view>
			</view>
			<view class="orderlist service bgbottom">
				<view class="order-title">
					<view>我的服务</view>
				</view>
				<view class="navbar clearfix">
					<view class="item" @click="renzheng">
						<u-transition :show="show1">
							<image src="/static/images/s1.png"></image>
						</u-transition>
						<view>实名认证</view>
					</view>
					<view class="item" @click="toPage('AddressList')">
						<u-transition :show="show1">
							<image src="/static/images/s2.png"></image>
						</u-transition>
						<view>收货地址</view>
					</view>
					<view class="item" @click="toSwitch('/pages/welfare/welfare')">
						<u-transition :show="show1">
							<image src="/static/images/s9.png"></image>
						</u-transition>
						<view>我的团队</view>
					</view>
					<view class="item" @click="toPage('/pages/classify/order')">
						<u-transition :show="show1">
							<image src="/static/images/s3.png"></image>
						</u-transition>
						<view>商品订单</view>
					</view>
					<view class="item" @click="shareposter">
						<u-transition :show="show1">
							<image src="/static/images/s4.png"></image>
						</u-transition>
						<view>邀请好友</view>
					</view>
					<view class="item" @click="show=true" v-if="userinfo.is_upgrade_space==1 && userinfo.is_space==0">
						<u-transition :show="show1">
							<image src="/static/images/s8.png"></image>
						</u-transition>
						<view>申请{{changename.div_name}}长</view>
					</view>
					<view class="item" @click="toPage('/pages/space/space')" v-if="userinfo.is_space!=0">
						<u-transition :show="show1">
							<image src="/static/images/s5.png"></image>
						</u-transition>
						<view>{{changename.div_name}}控制台</view>
					</view>
					<view class="item" @click="toPage('sksettings')">
						<u-transition :show="show1">
							<image src="/static/images/s6.png"></image>
						</u-transition>
						<view>收款方式</view>
					</view>
					<view class="item" @click="toPage('/pages/welfare/friends')">
						<u-transition :show="show1">
							<image src="/static/images/s10.png"></image>
						</u-transition>
						<view>转账</view>
					</view>
					<view class="item" @click="kefudj" v-if="userinfo.customer_type!=0">
						<u-transition :show="show1">
							<image src="/static/images/s11.png"></image>
						</u-transition>
						<view>客服</view>
					</view>
					<view class="item" @click="toPage('set')">
						<u-transition :show="show1">
							<image src="/static/images/s7.png"></image>
						</u-transition>
						<view>设置</view>
					</view>
				</view>
			</view>
		</u-transition>		
		<view class="poster-con" :class="posterflag?'':'hiddenpos'">
			<view class="poster_box">
				<!-- #ifdef H5 -->
				<img :src="poster">
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image :src="poster" mode="widthFix"></image>
				<!-- #endif -->
			</view>
			<view class="poster_box" style="position: absolute;width: 100%;top: -10000px;z-index: 0;">
				<!-- #ifndef MP-WEIXIN -->
				<canvas class="canvas-code" canvas-id="myQrcode" />
				<!-- #endif -->
				<canvas class="canvas-poster" id="canvasPoster" :style="{width:width+'px',height: height+'px'}"
					canvas-id="canvasPoster"></canvas>
			</view>
			<view class="tkbtBox">
				<view class="sharetype clearfix">
					<view @click="saveImage">
						<image src="/static/images/bc.png"></image>
						<view>保存图片</view>
					</view>
					<view @click="copyurl1">
						<image src="/static/images/copy2.png"></image>
						<view>复制链接</view>
					</view>
				</view>
				<view class="quxiao" @click="posterflag=false">取消</view>
			</view>
		</view>
		<u-modal :show="show" title="申请画室长" width="260" border-radius="0" :show-cancel-button="true"
			cancel-color="#323232" confirm-color="#323232" :title-style="{'font-size':'32rpx','font-weight': '800'}"
			:content-style="{color:'#999','font-size':'28rpx'}"
			:cancel-style="{'border-right': '2rpx solid $uni-background-color'}" @confirm="confirm" @cancel="cancel">
		</u-modal>
		<u-popup mode="center" :show="numbergoodsflag" @close="closeshow" :round="10">
			<view class="numbergoods_con">
				<view class="kftitle">扫码添加客服微信</view>
				<image :src="userinfo.customer_service" mode="widthFix"></image>
				<view class="tipbtn">长按二维码保存</view>
			</view>
		</u-popup>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	var QRCode = require('../../utils/weapp-qrcode.js')
	export default {
		data() {
			return {
				width: '',
				height: '',
				systemInfo: {},
				poster: '',
				userinfo: {},
				showLogin: false,
				posterflag: false,
				urlink: '',
				show1: true,
				show: false,
				numbergoodsflag: false,
				changename: {}
			}
		},
		onShow() {
			this.request('/member/getMemberDetails').then(res => {
				if (res.data.code == -500) {
					this.showLogin = true
					this.userinfo = {}
					// #ifdef APP-PLUS
					uni.hideTabBar()
					// #endif
				}
				if (res.data.code == 1) {
					this.userinfo = res.data.data
					// #ifdef APP-PLUS
					var type = 2
					// #endif
					// #ifdef H5
					var type = 1
					// #endif
					this.urlink = this.$Config.url + '/apiLogin/register.html?member_id=' + this.userinfo
						.member_id + '&type=' + type
					new QRCode('myQrcode', {
						text: this.urlink,
						width: 160,
						height: 160,
						padding: 10, // 生成二维码四周自动留边宽度，不传入默认为0
						correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度 从低到高M、L、H、Q
						callback: (res) => {
							this.shareInfo = {
								width: this.width,
								height: this.height,
								bgImg: '../../static/images/bg.png',
								yaoqr: this.userinfo.phone + '(' + this.userinfo.nickname + ')',
								qrcode: res.path
							}
							this.drawImage(this.shareInfo)
						}
					})
				}
			})
			this.request('/index/getSpaceSetting').then(res => {
				if (res.data.code == 1) {
					this.changename = res.data.data
				}
			})
		},
		onLoad() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.systemInfo = res
					that.width = res.windowWidth * 0.8 * 2
					that.height = that.width * 1.5
				}
			})
		},
		methods: {
			shareposter() {
				this.posterflag = true
				if (!this.poster) {
					uni.showLoading({
						title: '图片加载中'
					});
				}
			},
			copyurl() {
				uni.setClipboardData({
					data: this.userinfo.code,
					success: function() {
						console.log('success');
					}
				});
			},
			copyurl1() {
				uni.setClipboardData({
					data: this.urlink
				});
			},
			cancel() {
				this.show = false
			},
			closeshow() {
				this.numbergoodsflag = false
			},
			kefudj() {
				if (this.userinfo.customer_type == 1) {
					this.numbergoodsflag = true
				} else if (this.userinfo.customer_type == 2) {
					// #ifdef H5
					window.location.href = this.userinfo.customer_link
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openWeb(this.userinfo.customer_link)
					// #endif
				}
			},
			confirm() {
				this.request('/member/toApplySpace').then(res => {
					if (res.data.code == 1) {
						this.show = false
						this.request('/member/getMemberDetails').then(res => {
							if (res.data.code == 1) {
								this.userinfo = res.data.data
							}
						})
					} else {
						this.show = false
						this.$tip(res.data.msg)
					}
				})
			},
			loginhidden(data) {
				this.showLogin = data
				// #ifdef APP-PLUS
				uni.showTabBar()
				// #endif
			},
			renzheng() {
				if (this.userinfo.real_status == 2) {
					this.$tip("已经实名认证")
				} else {
					uni.navigateTo({
						url: 'identify'
					})
				}
			},
			toPage(route) {
				uni.navigateTo({
					url: route
				});
			},
			toSwitch(route) {
				uni.switchTab({
					url: route
				});
			},
			saveImage() {
				// #ifdef H5
				this.$tip("点击图片保存")
				// #endif
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '正在保存'
				});
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success: function() {
						uni.showToast({
							title: '图片保存成功～'
						});
					},
					fail: function(e) {
						if (e.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || e.errMsg ===
							"saveImageToPhotosAlbum:fail auth deny") {
							// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
							wx.showModal({
								title: '提示',
								content: '需要您授权保存相册',
								showCancel: false,
								success: modalSuccess => {
									wx.openSetting({
										success(settingdata) {
											if (settingdata.authSetting[
													'scope.writePhotosAlbum']) {
												wx.showModal({
													title: '提示',
													content: '获取权限成功,再次点击图片即可保存',
													showCancel: false,
												})
											} else {
												wx.showModal({
													title: '提示',
													content: '获取权限失败，将无法保存到相册哦~',
													showCancel: false,
												})
											}
										},
										fail(failData) {
											console.log("failData", failData)
										},
										complete(finishData) {
											console.log("finishData", finishData)
										}
									})
								}
							})
						}
					},
					complete: function() {
						uni.hideLoading()
					}
				});
				// #endif
			},
			drawImage(canvasAttrs) {
				let that = this

				let ctx = uni.createCanvasContext('canvasPoster', this)
				let canvasW = canvasAttrs.width // 画布的真实宽度
				let canvasH = canvasAttrs.height //画布的真实高度
				let yaoqrY = canvasH * 0.24
				let qrcodeW = canvasW * 0.48
				let qrcodeX = (canvasW - qrcodeW) / 2
				let qrcodeY = (canvasH - qrcodeW) / 1.65

				// 填充图片
				ctx.drawImage(canvasAttrs.bgImg, 0, 0, canvasW, canvasH)
				ctx.save()

				// 绘制邀请人名称
				ctx.textAlign = 'center';
				ctx.font = '28px sans-serif';
				ctx.fillText(canvasAttrs.yaoqr, canvasW / 2, yaoqrY)
				ctx.save()

				// 绘制二维码
				ctx.drawImage(canvasAttrs.qrcode, qrcodeX, qrcodeY, qrcodeW, qrcodeW)
				ctx.save()

				ctx.draw()
				setTimeout(() => {
					//下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边，所以在生成时进行了适当的缩小生成，这个大家可以自行尝试
					uni.canvasToTempFilePath({
						canvasId: 'canvasPoster',
						width: canvasW,
						height: canvasH,
						destWidth: canvasW * that.systemInfo.pixelRatio,
						destHeight: canvasH * that.systemInfo.pixelRatio,
						success: (res) => {
							this.poster = res.tempFilePath
							this.$emit("postershow", this.poster)
							uni.hideLoading();
						},
						fail: function(res) {
							console.log(res);
						}
					})
				}, 350)
			}
		}
	}
</script>

<style scoped lang="scss">
	.personal {
		/* #ifdef H5 */
		padding-bottom: 200rpx;

		/* #endif */
		.topinfo {
			position: relative;

			>image {
				width: 100%;
			}

			.info-con {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;

				.infoxx {
					text-align: right;
					margin: 70rpx 3% 44rpx;
					/* #ifdef H5 */
					margin-top: 40rpx;

					/* #endif */
					image {
						width: 44rpx;
						height: 44rpx;
						/* #ifdef H5 */
						position: absolute;
						right: 4%;
						top: 44rpx;
						/* #endif */
					}
				}

				.myself-info {
					margin: 0 3%;

					>image {
						float: left;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.self-right {
						float: left;
						margin-left: 25rpx;

						>view {
							&:first-of-type {
								font-size: 34rpx;
								font-weight: 800;

								text {
									&:nth-of-type(1) {
										position: relative;
										top: -4rpx;
										color: $uni-item-color;
									}

									&:nth-of-type(2) {
										position: relative;
										top: -4rpx;
										display: inline-block;
										height: 34rpx;
										font-size: 24rpx;
										color: $uni-item-color;
										font-weight: 400;
										border: 1rpx solid $uni-item-color;
										text-align: center;
										line-height: 34rpx;
										margin-left: 20rpx;
										padding: 0 10rpx;
									}
								}
							}

							&:last-of-type {
								margin-top: 14rpx;

								text {
									display: inline-block;
									height: 26rpx;
									line-height: 26rpx;
									font-size: 26rpx;
									color: #353C42;
									margin-left: 20rpx;

									&:first-of-type {
										border-right: 1rpx solid #DCDCDC;
										padding-right: 20rpx;
										margin-left: 0;
									}

									image {
										width: 32rpx;
										height: 32rpx;
										margin: -4rpx 20rpx 0;
									}
								}
							}
						}
					}
				}

				.myshuju {
					.item {
						view {
							color: #9594A0;

							&:first-of-type {
								color: #202020;
								font-weight: 800;
								font-size: 30rpx;
								margin-bottom: -4rpx;
							}
						}
					}
				}

				.currency {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 114rpx;
					background: $uni-item-color;
					border-radius: 10rpx;
					padding: 0 30rpx;
					margin: 24rpx 3% 0;

					view {
						font-size: 32rpx;
						font-weight: 800;
						color: #FFE8C6;

						&:nth-of-type(2) {
							view {
								float: left;
								width: 130rpx;
								height: 60rpx;
								border: 1rpx solid #F7D8AA;
								border-radius: 60rpx;
								font-size: 28rpx;
								color: #F7D8AA;
								text-align: center;
								line-height: 60rpx;
								box-sizing: border-box;

								&:nth-of-type(2) {
									margin-left: 20rpx;
									background: #F7D8AA;
									color: #905601;
								}
							}
						}
					}
				}
			}
		}

		.navbar {
			.item {
				position: relative;
				float: left;
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text-align: center;
				margin-top: 30rpx;

				view {
					text-align: center;
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #202020;
				}

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.signnum {
					position: absolute;
					right: 26%;
					top: -12rpx;
					width: 30rpx;
					height: 30rpx;
					font-size: 20rpx;
					color: #fff;
					background: #FF1010;
					border-radius: 50%;
					margin-top: 0;
					line-height: 30rpx;
				}
			}
		}
    .navbar1 {
      .item {
        position: relative;
        float: left;
        width: 33%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        margin-top: 30rpx;

        view {
          text-align: center;
          margin-top: 16rpx;
          font-size: 24rpx;
          color: #202020;
        }

        image {
          width: 60rpx;
          height: 60rpx;
        }

        .signnum {
          position: absolute;
          right: 26%;
          top: -12rpx;
          width: 30rpx;
          height: 30rpx;
          font-size: 20rpx;
          color: #fff;
          background: #FF1010;
          border-radius: 50%;
          margin-top: 0;
          line-height: 30rpx;
        }
      }
    }

		.orderlist {
			padding-bottom: 30rpx;

			.order-title {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 3% 10rpx;

				view {
					&:first-of-type {
						color: #202020;
						font-weight: 800;
					}
				}

				.lookorder {
					font-size: 24rpx;
					color: #999;

					.u-icon {
						margin-left: 2rpx;
					}
				}
			}
		}

		.service {
			.item {
				width: 20%;
			}
		}

		.poster-con {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			z-index: 999;
			background: rgba(27, 27, 32, 0.68);

			.poster_box {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 26%;
				z-index: 2;

				>image,
				>img {
					width: 600rpx;
				}
			}

			.tkbtBox {
				position: fixed;
				bottom: 0;
				z-index: 1;
				width: 100%;
				height: 534rpx;
				background: #F8F8F8;
				border-radius: 12rpx 12rpx 0 0;

				.sharetype {
					width: 600rpx;
					margin: 240rpx auto 48rpx;

					>view,
					button {
						float: left;
						width: 50%;
						text-align: center;

						image {
							width: 80rpx;
							height: 80rpx;
						}

						view {
							font-size: 24rpx;
							margin-top: 18rpx;
							text-align: center;
							color: #B2B2B2;
						}
					}

					button {
						margin-top: -8rpx;

						&::after {
							border: none;
						}

						view {
							margin-top: 4rpx;
						}
					}
				}

				.quxiao {
					width: 600rpx;
					height: 80rpx;
					background: #eee;
					text-align: center;
					line-height: 80rpx;
					margin: 0 auto;
					font-size: 28rpx;
					color: #999;
					border-radius: 80rpx;
				}
			}
		}

		.hiddenpos {
			z-index: -1;
			opacity: 0;
		}

		.numbergoods_con {
			width: 516rpx;
			text-align: center;

			.kftitle {
				font-size: 32rpx;
				font-weight: 800;
				text-align: center;
				padding: 40rpx 0;
			}

			image {
				width: 392rpx;
			}

			.tipbtn {
				height: 94rpx;
				color: #999;
				text-align: center;
				border-top: 1rpx solid #eee;
				line-height: 94rpx;
			}
		}
	}
</style>